<template>
    <div class="qilin-QilinWangEditorRichtext" style="border:1px solid #ccc;">
        <Toolbar
            :style="ownWangConfig.styles?.toolbarStyle || 'border-bottom:1px solid #ccc;' "
            :editor="editorRef"
            :defaultConfig="ownWangConfig.toolbarConfig || {} "
            :mode="ownWangConfig.mode || 'default' "
        ></Toolbar>
        <Editor
            :style="ownWangConfig.styles?.editorStyle || 'height:320px;overflow-y:hidden;' "
            v-model="ownWangConfig.value"
            :defaultConfig="ownWangConfig.editorConfig"
            :mode="ownWangConfig.mode || 'default' "
            @onCreated="handleCreated"
            @onBlur="handleBlur"
        ></Editor>
    </div>
</template>

<script setup>
import { Editor , Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css"; //引入css

// import {uploadFiles} from "@/api/index.js";

/*
    数据变量定义区域
*/
const editorRef=shallowRef(null);


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const propsValue=defineProps({
    wangConfig:{
        type:Object,
        default(){
            return {
                value:"", //显示内容
                styles:{
                    toolbarStyle:"border-bottom:1px solid #ccc;", //工具栏的自定义样式
                    editorStyle:"height:320px;overflow-y:hidden;" //编辑器的自定义样式
                },
                mode:"default", //模式，有default、simple两种
                toolbarConfig:{ //工具栏配置项
                    // 重新配置工具栏，显示哪些菜单，以及菜单的排序、分组等
                    toolbarKeys:[
                        "headerSelect",
                        "|",
                        "bold",
                        "italic",
                        {
                            key:"group-more-style",
                            title:"更多样式",
                            iconSvg:"<svg>......</svg>",
                            menuKeys:["through","code","clearStyle"]
                        }
                    ]
                },
                editorConfig:{ //编辑器配置项
                    placeholder:"请输入内容......", //占位符
                    readOnly:false, // 是否只读，默认false
                    autoFocus:true, //是否聚焦，默认true
                    scroll:true, //是否支持滚动，默认true
                    maxLength:1000*1000, //配置编辑器的最大输入长度
                    onMaxLength:(editor)=>{}, //当配置器输入长度达到maxLength限制时，触发该回调函数
                    hoverbarKeys:{}, //配置编辑器的hoverbar菜单
                    onCreated:(editor)=>{}, //编辑器创建完毕时的回调函数--以下这些事件方法不要通过props来传递
                    onChange:(editor)=>{}, //编辑器内容、选区变化时的回调函数
                    onDestroyed:(editor)=>{}, //编辑器销毁时的回调函数，调用editor.destroy()即可销毁编辑器
                    onFocus:(editor)=>{}, //编辑器focus时的回调函数
                    onBlur:(editor)=>{}, //编辑器blur时的回调函数
                    customPaste:(editor,event)=>{ //自定义粘贴事件，可阻止编辑器的默认粘贴，实现自己的粘贴逻辑
                        editor.insertText("我是你爹");
                        // 阻止默认的粘贴行为
                        event.preventDefault();
                        return false;
                        // 继续执行默认的粘贴行为
                        return true;
                    },
                    customAlert:(s,t)=>{ //自定义编辑器alert
                        console.log(s,t);
                    },
                    MENU_CONF:{ //菜单配置项
                        color:["#000","#333","#666"], //文字颜色
                        fontSizeList:[ //字号
                            "12px",
                            "14px",
                            {name:"16px",value:"16px"},
                            "18px"
                        ],
                        lineHeightList:["1","1.5","2","2.5"], //行高
                        emotion:'😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉'.split(' '), //表情--数组
                        codeSelectLang:{ //代码高亮
                            // 代码语言
                            codeLangs:[
                                {text:"CSS",value:"css"},
                                {text:"HTML",value:"html"},
                                {text:"XML",value:"xml"}
                            ]
                        },
                        insertLink:{ //插入链接
                            checkLink:(text,url)=>{}, //校验链接
                            parseLinkUrl:(url)=>{}, //转换链接url
                        },
                        editLink:{ //更新链接
                            checkLink:(text,url)=>{}, //校验链接
                            parseLinkUrl:(url)=>{}, //转换链接url
                        },
                        insertImage:{ //插入图片
                            onInsertedImage:(imageNode)=>{ //插入图片之后的回调
                                const {src,alt,url,href}=imageNode;
                            },
                            checkImage:(src,alt,url)=>{}, //校验图片链接
                            parseImageSrc:(src)=>{} //转换图片链接
                        },
                        editImage:{ //编辑图片
                            onUpdatedImage:(imageNode)=>{ //插入图片之后的回调
                                const {src,alt,url}=imageNode;
                            },
                            checkImage:(src,alt,url)=>{}, //校验图片链接
                            parseImageSrc:(src)=>{} //转换图片链接
                        },
                        uploadImage:{ //上传图片
                            server:"", //服务端地址，必填
                            fieldname:"your-custom-name", //上传后端的字段名称
                            maxFileSize:1*1024*1024, //单个文件的最大体积限制，默认为2M
                            maxNumberOffFiles:10, //最多可上传几个文件
                            allowedFileTypes:["image/*"], //选择文件时的类型限制，默认为["image/*"]，如不限制，则设置为[]
                            meta:{ //自定义上传参数，参数会被添加到formData中去
                                token:"",
                                otherKey:""
                            },
                            metaWithUrl:false, //将meta参数拼接到url参数中，默认false
                            headers:{ //自定义增加请求头
                                Accept:"text/x-json",
                                otherKey:""
                            },
                            withCredentials:true, //跨域是否传递cookie，默认false
                            timeout:5*1000, //超时时间，默认10秒
                            onBeforeUpload:(file)=>{ //上传之前触发
                                return file; //表示上传这个文件
                                return false; //表示不上传这个file
                            },
                            onProgress:(progress)=>{}, //上传进度的回调函数，progress是0-100的数字
                            onSuccess:(file,res)=>{}, //单个文件上传成功后的回调函数
                            onFailed:(file,res)=>{}, //单个文件上传失败后的回调函数
                            onError:(file,err,res)=>{}, //上传错误或者触发timeout时的回调函数,
                            customInsert:(res,insertFn)=>{ //自定义插入图片
                                insertFn(url,alt,href);
                            },
                            customUpload:(file,insertFn)=>{ //自定义上传
                                insertFn(url,alt,href);
                            }
                        }
                    }
                }
            }
        }
    },
    content:{
        type:String,
        default:""
    }
});
// 暴露父组件自定义方法
const emits=defineEmits(["update:wangConfig","success"]);
// 组件自身的配置项
const ownWangConfig=computed({
    get(){
        nextTick(()=>{
            // 初始化获取自定义显示内容
            propsValue.wangConfig.value=propsValue.content;
        });
        // 统一设置自定义上传图片事件监听
        if(propsValue.wangConfig?.editorConfig?.MENU_CONF){
            Object.assign(propsValue.wangConfig?.editorConfig?.MENU_CONF,{
                uploadImage:{
                    customUpload:uploadImage
                }
            });
        }else{
            propsValue.wangConfig.editorConfig.MENU_CONF={
                uploadImage:{
                    customUpload:uploadImage
                }
            };
        };
        return propsValue.wangConfig;
    },
    set(val){
        emits("update:wangConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/
// 上传图片事件监听
const uploadImage=(file,insertFn)=>{
    // console.log(file,insertFn);
    let formData=new FormData();
    formData.append("file",file);
    uploadFiles(formData).then((res)=>{
        if(res.code === 200){
            insertFn(res.data.url,res.data.newFileName,res.data.url);
        }else{
            ElMessage({
                message:res.msg || "系统错误",
                type:"error"
            });
        };
    });
};
// 编辑器创建完毕时的回调函数
const handleCreated=(editor)=>{
    editorRef.value=editor;
};
// 编辑器失去焦点事件监听
const handleBlur=(editor)=>{
    // console.log(editor,editorRef.value);
    // console.log(editor.getHtml());
    if(editor){
        emits("success",editor.getHtml());
    }else{
        emits("success",editorRef.value.getHtml());
    };
};


// 暴露子组件的自定义事件
defineExpose({
    handleBlur
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
